<template>
  <div class="v-editor-sync_map g-jc-sb">
    <div
      class="_disable"
      style="width: 100%; cursor: text; font-size: 12px; color: #606266"
    >
      <span>{{ locale.getTByKey(`propertyConfig.${row.value}`, showName) }}</span>
    </div>

    <div class="g-pd-r-4 img-btn">
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { elementPropertySyncCreateWindow } from "@/modules/model/modals/elementPropertySync";
import { PropertyKey } from "@/constants/Enums";
import { onMounted, ref } from "vue";
import { modelService } from "@/modules/model/service";
import { ElementPropertySync } from "@/modules/model/modals/elementPropertySync/elementPropertySync";
import { locale } from "@/util/locale";

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  encrypted?: boolean;
  isShowTerm?: boolean;
}>();

const showName = ref("");

const propertyMap = {
  [PropertyKey.PropertySyncRule_targetProperty]: PropertyKey.PropertySyncRule_targetElement,
  [PropertyKey.PropertySyncRule_sourceProperty]: PropertyKey.PropertySyncRule_sourceElement
};

const elementPropertySync = new ElementPropertySync();

function handleClick() {
  const project = app.activeProject;
  if (!project) return;
  const {
    nodePool: { selectedNodeIds }
  } = project;
  const usedIds = selectedNodeIds.length ? selectedNodeIds : [props.row.modelId];
  elementPropertySyncCreateWindow
    .popup({
      projectId: app.activeProject!.config.id,
      ruleIds: [...usedIds]
    })
    .then(res => {
      if (res.success) {
        elementPropertySync.doSync(app.activeProject!.config.id, res.ruleIds, res.errorTips || []);
      }
    });
}

const getShowName = async () => {
  if (app.activeProject?.id) {
    const aimedModelId = await modelService.getPropertyValueById(app.activeProject.id, props.row.modelId, propertyMap[props.row.key]);
    if (aimedModelId) {
      const properties = await modelService.getModelProperties(app.activeProject.id, aimedModelId as string, 3);
      for (const p of properties) {
        if (p.key === props.row.value) {
          showName.value = p.name;
          break;
        }
      }
    }
  }
};

onMounted(() => {
  getShowName();
});
</script>
<style lang="scss">
.v-editor-sync_map {
  ._disable {
    background-color: #f5f7fa;
    color: #a8abb2 !important;
    cursor: not-allowed !important;
  }
  height: auto;
  min-height: 24px;
  padding-left: 5px;
  align-items: center;
  > .img-btn {
    display: flex;
    align-items: center;
  }
}
</style>
